<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>薪酬管理 - 薪酬概览</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="../js/components/navigation.js"></script>
    <script src="../js/utils.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/jquery-3.7.1.min.js"></script>
    <style>
        .stats-cards {
            display: flex;
            justify-content: space-around;
        }

        .stats-cards .card {
            width: 100%;
        }

        .filter-group {
            display: flex;
            gap: 20px;
            justify-content: space-around;
        }

        .part {
        }

        .salary-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .salary-table thead {
            background-color: #2c3e50;
            color: white;
        }

        .salary-table th,
        .salary-table td {
            padding: 12px 15px;
            text-align: left;
        }

        .salary-table tbody tr {
            transition: background-color 0.3s ease;
            border-bottom: 1px solid #f1f1f1;
        }

        .salary-table tbody tr:hover {
            background-color: #f8f9fa;
        }

        .salary-table tbody tr:last-child {
            border-bottom: none;
        }

        .salary-table .total-column {
            font-weight: bold;
            color: #2c3e50;
        }

        .salary-table .btn-sm {
            padding: 6px 10px;
            border-radius: 4px;
        }

        .salary-table .no-data {
            color: #7f8c8d;
            padding: 40px 0;
            text-align: center;
        }

        /* 分页样式 */
        tfoot {
            margin-top: 20px;
            display: block;
            text-align: center;
            padding: 15px;
        }
        tfoot input[type="button"] {
            width: 60px;
            height: 30px;
            margin-right: 10px;
            background: #3a56d4;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        tfoot input[type="text"] {
            width: 40px;
            height: 30px;
            text-align: center;
            border: 1px solid #ced4da;
            border-radius: 4px;
            margin: 0 5px;
        }
        tfoot span {
            margin: 0 5px;
        }
    </style>
</head>
<body>
<div class="loading-overlay" id="loading-overlay">
    <div class="loading-spinner"></div>
</div>

<div class="toast" id="toast"></div>

<div class="app-container">
    <header class="app-header">
        <div class="logo">
            <i class="fas fa-building"></i> 员工管理系统
        </div>
        <div class="user-info">
            <span id="username-display" class="username"></span>
            <button id="logout-btn" class="btn btn-secondary">
                <i class="fas fa-sign-out-alt"></i> 退出登录
            </button>
        </div>
    </header>

    <div class="app-body">
        <aside class="sidebar">
            <nav class="menu">
                <ul>
                    <li><a href="#" class="menu-item active" data-target="welcome">欢迎页</a></li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">员工管理</a>
                        <ul class="submenu">
                            <li><a href="../employee/list.html" class="submenu-item">员工列表</a></li>
                            <li><a href="../employee/add.html" class="submenu-item">添加员工</a></li>
                        </ul>
                    </li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">业务管理</a>
                        <ul class="submenu">
                            <li><a href="../business/list.html" class="submenu-item">业务列表</a></li>
                            <li><a href="../business/create.html" class="submenu-item">创建业务</a></li>
                        </ul>
                    </li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">薪酬管理</a>
                        <ul class="submenu">
                            <li><a href="overview.html" class="submenu-item">薪酬概览</a></li>
                            <li><a href="manage.html" class="submenu-item">薪酬管理</a></li>
                        </ul>
                    </li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">系统设置</a>
                        <ul class="submenu">
                            <li><a href="../system/user.html" class="submenu-item">用户管理</a></li>
                            <li><a href="../system/profile.html" class="submenu-item">个人设置</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </aside>

        <main class="content">
            <div class="page-header">
                <h1><i class="fas fa-money-bill-wave"></i> 薪酬概览</h1>
                <div class="breadcrumb">
                    <a href="#"><i class="fas fa-home"></i> 首页</a> &gt;
                    <a href="#"><i class="fas fa-money-bill-wave"></i> 薪酬管理</a> &gt;
                    <span><i class="fas fa-chart-line"></i> 薪酬概览</span>
                </div>
            </div>


            <div class="stats-cards mt-4">
                <div class="card stat-card">
                    <div class="card-body">
                        <div class="card-title"><i class="fas fa-wallet"></i></div>
                        <div class="card-value" id="total-salary"></div>
                        <div class="card-change positive"><i class="fas fa-arrow-up"></i> </div>
                    </div>
                </div>
                <div class="card stat-card">
                    <div class="card-body">
                        <div class="card-title"><i class="fas fa-users"></i> </div>
                        <div class="card-value" id="avg-salary"></div>
                        <div class="card-change positive"><i class="fas fa-arrow-up"></i> </div>
                    </div>
                </div>
                <div class="card stat-card">
                    <div class="card-body">
                        <div class="card-title"><i class="fas fa-chart-line"></i> </div>
                        <div class="card-value" id="salary-growth"></div>
                        <div class="card-change negative"><i class="fas fa-arrow-down"></i> </div>
                    </div>
                </div>
                <div class="card stat-card">
                    <div class="card-body">
                        <div class="card-title"><i class="fas fa-gift"></i> </div>
                        <div class="card-value" id="benefit-expense"></div>
                        <div class="card-change positive"><i class="fas fa-arrow-up"></i> </div>
                    </div>
                </div>
            </div>


            <div class="card">
                <div class="card-header">
                    <h2>筛选条件</h2>
                </div>
                <div class="card-body">
                    <div class="filter-group col-md-3">
                        <div class="part">
                            <label for="employee-name" class="form-label">员工姓名</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-user"></i></span>
                                </div>
                                <input type="text" id="employee-name" class="form-control" placeholder="输入员工姓名">
                            </div>
                        </div>
                        <div class="part">
                            <label for="start-date" class="form-label">开始日期</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-calendar-day"></i></span>
                                </div>
                                <input type="date" id="start-date" class="form-control" value="1900-01-01">
                            </div>
                        </div>
                        <div class="part">
                            <label for="end-date" class="form-label">结束日期</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-calendar-day"></i></span>
                                </div>
                                <input type="date" id="end-date" class="form-control" value="2200-12-31">
                            </div>
                        </div>
                        <div class="part">
                            <label for="department-filter" class="form-label">部门</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-building"></i></span>
                                </div>
                                <select id="department-filter" class="form-control">
                                    <option value="">全部部门</option>
                                    <option value="101">技术部</option>
                                    <option value="102">市场部</option>
                                    <option value="103">财务部</option>
                                    <option value="104">人力资源部</option>
                                </select>
                            </div>
                        </div>
                        <div class="part">
                            <div class="form-label">
                                &nbsp;
                            </div>
                            <div>
                                <button id="apply-filter" class="btn btn-primary">
                                    <i class="fas fa-filter"></i> 应用筛选
                                </button>
                                <button id="reset-filter" class="btn btn-secondary ml-2">
                                    <i class="fas fa-redo"></i> 重置
                                </button>
                                <button id="export-report" class="btn btn-success ml-2">
                                    <i class="fas fa-download"></i> 导出报表
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mt-4">
                <div class="card-header">
                    <h3><i class="fas fa-list"></i> 薪酬明细</h3>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="data-table table-hover table-striped salary-table">
                            <thead>
                            <tr>
                                <th>员工姓名</th>
                                <th>部门</th>
                                <th>职位</th>
                                <th>基本工资</th>
                                <th>奖金</th>
                                <th>福利</th>
                                <th>总计</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="salary-table-body">
                            </tbody>
                            <tfoot></tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        show(1, "", "1900-1-1", "2200-12-31","");
        $("#apply-filter").click(function() {
            let eName = $("#employee-name").val();
            let startTime = $("#start-date").val();
            let endDate = $("#end-date").val();
            let department = $("#department-filter").val();

            show(1, eName, startTime, endDate, department);
        });

        $("#reset-filter").click(function() {
            show(1, "", "1900-1-1", "2100-12-31","");
        });
    });

    $(document).on("click", "tfoot input[type='button']", function() {
        let pageindex;
        if ($(this).attr("alt") === "确定") {
            let totalPages = $("tfoot i").attr("alt");
            let inputPage = $("#pageindex").val();
            if (inputPage >= 1 && inputPage <= totalPages) {
                pageindex = inputPage;
            } else {
                pageindex = 1;
                alert("页码超出范围");
            }
        } else {
            pageindex = $(this).attr("alt");
        }

        let eName = $("#employee-name").val();
        let startTime = $("#start-date").val();
        let endDate = $("#end-date").val();
        let department = $("#department-filter").val();

        show(pageindex, eName, startTime, endDate, department);
    });

    function show(indexPage, eName, startTime, endDate, department) {
        $("#loading-overlay").show();

        $.get("../salaryControl/salaryList",
            {
                "indexPage": indexPage,
                "eName": eName,
                "startTime": startTime,
                "endDate": endDate,
                "department": department
            },
            function (list) {
                $("#loading-overlay").hide();
                $('#salary-table-body').empty();
                if (list.listIndex && list.listIndex.length !== 0) {
                    for (let i = 0; i < list.listIndex.length; i++) {
                        let salary = list.listIndex[i];
                        $("<tr>\n" +
                            "<td>" + (salary.eName || "未知") + "</td>\n" +
                            "<td>" + (departmentId(salary.departmentId) || "未知") + "</td>\n" +
                            "<td>" + (position(salary.positionId) || "未知") + "</td>\n" +
                            "<td>" + (salary.baseSalary || 0) + "</td>\n" +
                            "<td>" + (salary.bonus || 0) + "</td>\n" +
                            "<td>" + (salary.benefits || 0) + "</td>\n" +
                            "<td class='total-column'>" + ((salary.baseSalary || 0) + (salary.bonus || 0) + (salary.benefits || 0)) + "</td>\n" +
                            "<td>" +
                            "<button class='btn btn-primary btn-sm edit-btn' data-id='" + (salary.sId || "") + "'>编辑</button>" +
                            "<button class='btn btn-danger btn-sm delete-btn' data-id='" + (salary.sId || "") + "'>删除</button>" +
                            "</td>\n" +
                            "</tr>").appendTo('#salary-table-body');
                    }
                } else {
                    $("<tr><td colspan='8' class='no-data'>暂无数据</td></tr>").appendTo('#salary-table-body');
                }

                updatePagination(list);
            })
            .fail(function(xhr, status, error) {
                $("#loading-overlay").hide();
                console.error("数据加载失败:", status, error);
                $('#salary-table-body').html("<tr><td colspan='8' class='no-data'>数据加载失败，请重试</td></tr>");
            });
    }
    function departmentId(departmentId) {
        if(departmentId==101){
            return "技术部";
        }
        if(departmentId==102){
            return "市场部";
        }
        if(departmentId==103){
            return "财务部";
        }
        if(departmentId==104){
            return "人力资源部";
        }
    }
    function position(positionId) {
        if(positionId==1001){
            return "实习生";
        }
        if(positionId==1002){
            return "普通员工";
        }
        if(positionId==1003){
            return "部门主管";
        }
        if(positionId==1004){
            return "部长";
        }
    }


    function updatePagination(list) {
        $("tfoot").empty();

        if (!list || !list.pageCount) {
            return;
        }

        if (list.pageIndex > 1) {
            $("<input type='button' value='上一页' alt='" + (list.pageIndex - 1) + "'/>").appendTo("tfoot");
        }

        for (let i = 1; i <= list.pageCount; i++) {
            let btn = $("<input type='button' value='" + i + "' alt='" + i + "'/>");
            if (i === list.pageIndex) {
                btn.css("background", "#2c3e50");
            }
            btn.appendTo("tfoot");
        }

        if (list.pageIndex < list.pageCount) {
            $("<input type='button' value='下一页' alt='" + (list.pageIndex + 1) + "'/>").appendTo("tfoot");
        }

        $("<span>共" + list.pageCount + "页</span>").appendTo("tfoot");
    }
</script>
</body>
</html>